import React, {PureComponent} from "react";
import dragIcon from "../assets/img/drag.png";
import {AutoSizer, List as VList} from "react-virtualized";
import {connect} from "react-redux";

/**
 * 全局监控 警报模块
 */
class AlarmComponent extends PureComponent {


    /**
     * <div>终端编号:{{j.tagSerial}}</div>
     <div className="first">姓名:{{j.driverUserName}}</div>
     <div>时间:{{j.alarmTime}}</div>
     <div className="first">
     类型:
     <span
     style="color:red;font-size:12px;"
     >{{(j.alarmType == 5) ? '电瓶防盗预警' : ((j.alarmType == 6) ? '整车防盗预警' : ((j.alarmType == 2) ? '电压预警' : ((j.alarmType == 1) ? '温度报警' : '')))}}</span>
     </div>
     <div
     v-if="j.alarmValue == 1 || j.alarmValue == 2"
     >数值:{{j.alarmValue}}{{j.alarmType == 1 ? '℃' : (j.alarmType == 2 ? 'V' : '')}}</div>
     * @returns {*}
     */


    //0: alarmTime: "2019/04/11 15:56"
    // alarmType: 5
    // alarmValue: 41.95
    // driverHandphone: "15502474511"
    // driverUserName: "田工环境2"
    // tagSerial: "89860410111840370828"


    render() {

        const {carsWarningArray} =this.props;


        /**
         *
         * @param key Unique key within array of rows
         * @param index Index of row within collection
         * @param isScrolling  The List is currently being scrolled
         * @param isVisible  This row is visible within the List (eg it is not an overscanned row)
         * @param style  Style object to be applied to row (to position it)
         * @returns {*}
         */

        let warningText;
        let tagText=" ";
        function rowRenderer({key, index, isScrolling, isVisible, style}) {

            const warningEntity = carsWarningArray.get(index);

            const alarmType = warningEntity.get("alarmType");

            switch (alarmType) {
                case 5:
                    warningText ="电瓶防盗预警";
                    break;
                case 6:
                    warningText ="整车防盗预警";
                    break;
                case 2:
                    warningText ="电压预警";
                    tagText="V";
                    break;
                case 1:
                    warningText ="温度报警";
                    tagText="℃";
                    break;
                default:
                    warningText ="无匹配";
                    break;
            }

            return (

                <div style={{...alarmItemRootStyle,...style}} key={key}>
                    <div style={{...alarmMessageItemStyle,...{width:"100%"}}}>终端编号:&nbsp;{warningEntity.get("tagSerial")}</div>
                    <div style={alarmMessageItemStyle}>姓名:&nbsp;{warningEntity.get("driverUserName")}</div>
                    <div style={alarmMessageItemStyle}>时间:&nbsp;{warningEntity.get("alarmTime")}</div>
                    <div style={alarmMessageItemStyle}>类型:&nbsp;<span style={warningTextStyle}>{warningText}</span></div>
                    <div style={alarmMessageItemStyle}>数值:&nbsp;{`${warningEntity.get("alarmValue")}${tagText}`}</div>
                </div>

            )
        }


        return (
            <div style={alarmWrapperStyle}>
                <div style={alarmContentRootStyle}>
                    <h4 style={alarmTitleStyle}>报警记录</h4>

                    <AutoSizer style={{flex:1}}>
                        {
                            ({height, width}) => {

                                return (
                                    <VList
                                        height={height}
                                        rowCount={carsWarningArray.size}
                                        rowHeight={80}
                                        rowRenderer={rowRenderer}
                                        width={width}
                                        style={{height:"100%"}}
                                    />
                                );
                            }
                        }
                    </AutoSizer>

                </div>
                <img style={alarmDragStyle} src={dragIcon} alt={"点击消失"}/>
            </div>
        );
    }

}

const mapStatus =(status) =>{
  return {
      carsWarningArray: status.getIn(["globalReducer", "carsWarningArray"])
  };
};

export default connect(mapStatus,null)(AlarmComponent);

const alarmWrapperStyle = {
    width: 300,
    height: "100%",
    position: "relative",
    minHeight: 200,
};

const alarmContentRootStyle = {
    width: 280,
    height: "100%",
    border: "1px solid #ccc",
    borderRadius: 4,
    boxSizing: "border-box",

    display: "flex",
    flexDirection: 'column',

};

const alarmTitleStyle = {
    width: "100%",
    height: 40,
    lineHeight: "40px",
    textAlign: "center",
    backgroundColor: '#fafafa',
    borderBottom: "1px solid #ccc",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    fontSize: 14,
};

const alarmItemRootStyle = {

    borderBottom: "1px solid #ccc",
    paddingTop: 12,
    display: "flex",
    flexWrap: "wrap",
};

const alarmMessageItemStyle = {
    width: "50%",
    fontSize: 12,
    textAlign: "start",
    boxSizing: 'border-box',
    padding: "0 0 6px 6px",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    wordBreak: "keep-all",
    overflow: "hidden",

};

const warningTextStyle ={
    color:"red",
    fontSize:12,
};


//先执行 定位的效果 然后执行 动画效果
const alarmDragStyle = {
    height: 20,
    width: 60,
    verticalAlign: "center",

    transaction: "all",
    transform: "rotate(-90deg) translate(10px,20px)",

    position: "absolute",
    top: "50%",
    right: 0,
};


